import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
  Card,
  Form,
  Input,
  Button,
  Typography,
  Alert,
  Space,
  Divider
} from 'antd';
import {
  LockOutlined,
  UserOutlined,
  SafetyOutlined,
  EyeInvisibleOutlined,
  EyeTwoTone
} from '@ant-design/icons';

import { useAuth } from '../contexts/AuthContext';
import { useWallet } from '../contexts/WalletContext';

const { Title, Text } = Typography;

const Login = () => {
  const [form] = Form.useForm();
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();

  const { login } = useAuth();
  const { account } = useWallet();

  const handleSubmit = async (values) => {
    if (!account) {
      return;
    }

    setIsLoading(true);
    try {
      const success = await login(values.password);
      if (success) {
        navigate('/dashboard');
      }
    } finally {
      setIsLoading(false);
    }
  };

  const urlParams = new URLSearchParams(window.location.search);
  const referralCode = urlParams.get('ref');

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center py-12 px-4">
      <div className="max-w-md w-full">
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-600 rounded-full mb-4">
            <SafetyOutlined className="text-3xl text-white" />
          </div>
          <Title level={2} className="text-gray-900 mb-2">
            Welcome Back
          </Title>
          <Text className="text-gray-600">
            Sign in to access your God Token staking account
          </Text>
        </div>

        <Card className="shadow-lg border-0">
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            requiredMark={false}
          >
            <Form.Item>
              <Alert
                message="Connected Wallet"
                description={
                  <div className="flex items-center space-x-2">
                    <UserOutlined />
                    <Text code className="flex-1">
                      {account || 'No wallet connected'}
                    </Text>
                  </div>
                }
                type="info"
                showIcon
              />
            </Form.Item>

            <Form.Item
              label="Password"
              name="password"
              rules={[
                { required: true, message: 'Please enter your password' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="Enter your password"
                size="large"
                iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                block
                loading={isLoading}
                disabled={!account}
                className="h-12 bg-blue-600 hover:bg-blue-700 border-0"
              >
                {isLoading ? 'Signing In...' : 'Sign In'}
              </Button>
            </Form.Item>
          </Form>

          <Divider />

          <div className="text-center">
            <Text type="secondary">
              Don't have an account?{' '}
              <Link to="/register" className="text-blue-600 hover:text-blue-700">
                Sign Up
              </Link>
            </Text>
          </div>

          <div className="mt-6 text-center">
            <Link to="/connect" className="text-gray-600 hover:text-gray-900">
              ← Back to Wallet Connection
            </Link>
          </div>
        </Card>

        {/* Security Notice */}
        <div className="mt-8 text-center">
          <Alert
            message="Security Notice"
            description={
              <div className="text-left">
                <p className="mb-2">• Never share your password with anyone</p>
                <p className="mb-2">• Use a strong, unique password</p>
                <p>• Always verify you're on the official website</p>
              </div>
            }
            type="warning"
            showIcon
            className="inline-block text-left"
          />
        </div>
      </div>
    </div>
  );
};

export default Login;